<!DOCTYPE html>
<html>
<head>
    <title>Polar</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <script type="text/javascript" src="../src/JChart.js"></script>
    <script type="text/javascript" src="../src/JChart.Canvas.js"></script>
    <script type="text/javascript" src="../src/JChart.Chart.js"></script>
    <script type="text/javascript" src="../src/JChart.Scale.js"></script>
    <script type="text/javascript" src="../src/JChart.Polar.js"></script>
</head>
<body>
<canvas id="canvas1" height="600" width="600"></canvas>
<script type="text/javascript">
    var data = {
        labels : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
        datasets : [
            {
                value : 30,
                color: "#D97041"
            },
            {
                value : 90,
                color: "#C7604C"
            },
            {
                value : 24,
                color: "#21323D"
            },
            {
                value : 58,
                color: "#9D9B7F"
            },
            {
                value : 82,
                color: "#7D4F6D"
            },
            {
                value : 8,
                color: "#584A5E"
            }
        ]
    }
    var radar = new JChart.Polar(data,{
        id : 'canvas1',
        showScaleLabel : false
    });
    radar.on('doubleTap',function(){
        alert('double');
    });
    radar.draw();

</script>
</body>
</html>